<template>
    <view class="form-section">
        <text class="text-2xl font-bold text-center block my-3">产后信息</text>
        <text class="text-base text-content text-center block mb-8">
            您已经进入产后阶段，我们将为您提供产后恢复和婴儿成长的相关内容
        </text>

        <view class="custom-form">
            <view class="form-item">
                <view class="form-label">
                    <text>宝宝出生日期（可选）</text>
                </view>
                <view class="date-picker" @tap="showBirthCalendar = true">
                    <view class="date-input">
                        <text v-if="localFormData.birthDate">{{ formatDisplayDate(localFormData.birthDate) }}</text>
                        <text v-else class="placeholder">请选择日期（可选）</text>
                        <u-icon name="calendar" color="#999" size="20"></u-icon>
                    </view>
                </view>
                <text class="text-sm text-muted mt-1"
                    >填写此项可以获取适合宝宝月龄的专业建议
                </text>
            </view>
        </view>

        <u-calendar
            v-model="showBirthCalendar"
            mode="date"
            @change="onBirthDateChange"
            :max-date="today"
            confirmText="确认"
            toolTip="选择日期"
            activeBgColor="#FF9FB5"
            rangeBgColor="rgba(255, 159, 181, 0.13)"
            rangeColor="#FF9FB5"
            btnType="primary"
        ></u-calendar>
    </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch, onMounted } from 'vue'
import dayjs from 'dayjs'

// 定义props
const props = defineProps({
    formData: {
        type: Object,
        required: true
    },
    today: {
        type: String,
        required: true
    }
})

// 定义emit
const emit = defineEmits(['update:formData', 'validate'])

// 日期选择器控制
const showBirthCalendar = ref<boolean>(false)

// 本地表单数据
const localFormData = reactive({
    birthDate: ''
})

// 初始化本地数据
onMounted(() => {
    if (props.formData) {
        Object.assign(localFormData, props.formData)
        console.log('初始化本地数据:', localFormData)
    }
})

// 监听props变化，更新本地数据
watch(() => props.formData, (newVal) => {
    if (newVal) {
        // 防止循环更新，只有当值不同时才更新
        if (JSON.stringify(localFormData) !== JSON.stringify(newVal)) {
            Object.assign(localFormData, newVal)
            console.log('props变化，更新本地数据:', localFormData)
        }
    }
}, { deep: true, immediate: true })

// 监听本地数据变化，更新父组件数据
watch(localFormData, (newVal) => {
    console.log('本地数据变化，更新父组件:', newVal)
    emit('update:formData', { ...newVal })
    validateForm()
}, { deep: true })

// 日期选择回调
const onBirthDateChange = (e: any): void => {
    console.log('出生日期选择回调:', e);
    // 根据uView UI文档，日期选择事件可能直接返回日期字符串，或者包含在对象的result属性中
    const dateValue = typeof e === 'string' ? e : (e && e.result ? e.result : null);
    
    if (dateValue) {
        console.log('选择的日期:', dateValue);
        localFormData.birthDate = dateValue;
        showBirthCalendar.value = false; // 关闭日历
        // 不需要手动emit，watch会处理
    }
}

// 验证表单 - 产后阶段无必填字段
const validateForm = (): void => {
    emit('validate', true);
}

// 格式化日期显示（用于界面显示）
const formatDisplayDate = (dateString: string): string => {
    if (!dateString) return '';
    console.log('格式化日期:', dateString);
    return dayjs(dateString).format('YYYY-MM-DD');
}
</script>

<style lang="scss" scoped>
/* 自定义表单样式 */
.custom-form {
    width: 100%;
}

.form-item {
    margin-bottom: 30rpx;
}

.form-label {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
}

.required {
    color: #ff5252;
    margin-left: 8rpx;
}

/* 日期选择器样式 */
.date-picker {
    width: 100%;
    cursor: pointer;
}

.date-input {
    width: 100%;
    height: 80rpx;
    border: 1px solid #eeeeee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
}

.placeholder {
    color: #999999;
}
</style> 